<template>
  <div>
    <div class="middle-box">
      <span class="title"> 特殊要求 </span>
    </div>
    <div class="btn_asset">
      <span class="btn_left">
        <el-button type="primary" @click="NewData"> 新增 </el-button>
        <el-button @click="batchDelete"> 删除 </el-button>
      </span>
      <span class="btn_right">
        <el-button size="small">
          <el-icon style="margin-right: 2px; margin-bottom: 2px"
            ><RefreshRight /></el-icon
          >刷新
        </el-button>
      </span>
    </div>
    <el-table
      stripe
      border
      height="100%"
      size="small"
      ref="table"
      :data="state.tableData"
      :cell-class-name="tableCellClassName"
      v-loading="state.loading"
      @cell-click="cellClick"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column align="center" label="要求类型">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-select
              v-model="scope.row.requestType"
              placeholder="请输入"
              size="small"
              filterable
              clearable
              :option="state.option"
              fit-input-width
            >
              <el-option
                v-for="item in state.option"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </div>
          <span v-else>
            {{ scope.row.requestType }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="要求内容" width="464">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.requestContent"
              placeholder="请输入"
              size="small"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.requestContent }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加人员">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input v-model="scope.row.createBy" size="small" clearable>
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.createBy }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加时间">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-date-picker
              v-model="scope.row.createTime"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择"
              style="width: 100%"
            />
          </div>
          <span v-else>
            {{ scope.row.createTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关闭人员">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-input
              v-model="scope.row.closeBy"
              size="small"
              placeholder="请输入"
              clearable
            >
            </el-input>
          </div>
          <span v-else>
            {{ scope.row.closeBy }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关闭时间" width="300">
        <template #default="scope">
          <div
            v-if="
              scope.row.index === state.rowIndex &&
              scope.column.index === state.columnIndex
            "
          >
            <el-date-picker
              v-model="scope.row.closeDate"
              type="datetime"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择"
              style="width: 100%"
            />
          </div>
          <span v-else>
            {{ scope.row.closeDate }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增对方信息 -->
    <el-dialog title="特殊要求" v-model="state.dialogData.show" width="448px">
      <el-form
        :model="state.formData"
        :rules="state.formRules"
        label-suffix=":"
        label-width="80px"
        ref="form"
      >
        <el-row>
          <el-col>
            <el-form-item label="要求类型" prop="requestType">
              <el-select
                v-model="state.formData.requestType"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in state.option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="要求内容" prop="requestContent">
              <el-input
                v-model="state.formData.requestContent"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="添加人员" prop="createBy">
              <el-input
                v-model="state.formData.createBy"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="添加时间" prop="createTime">
              <el-date-picker
                v-model="state.formData.createTime"
                placeholder="请选择"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="关闭人员" prop="closeBy">
              <el-input
                v-model="state.formData.closeBy"
                fit-input-width
                placeholder="请输入"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="关闭时间" prop="closeDate">
              <el-date-picker
                v-model="state.formData.closeDate"
                placeholder="请选择"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel" type="default" size="small"
            >取消</el-button
          >
          <el-button
            type="primary"
            size="small"
            style="background: #5d9df5"
            @click="save"
            >保存</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  onMounted,
  toRaw,
  watch,
  defineProps,
  defineEmits,
  defineExpose
} from "vue";
import { useRoute } from "vue-router";
import request from "@/public/request";
import { ElMessage, ElMessageBox } from "element-plus";
const route = useRoute();
const props = defineProps({
  isNew: {
    type: Boolean,
  },
});
const emit = defineEmits();
const getList = async () => {
  let res = await request.get("/api/crspecialrequest/queryby", {
    Id: route.query.id,
  });
  console.log("获取特殊要求", res);
  state.tableData = res.data;
  state.compareTableData = JSON.parse(JSON.stringify(res.data))
};
const resetTableData = () => {
  state.tableData = JSON.parse(JSON.stringify(state.compareTableData))
}
const NewData = () => {
  closeDiag();
  state.dialogData.show = true;
};
const form = ref();
const table = ref();
const cancel = () => {
  state.dialogData.show = false;
  form.value.clearValidate();
};
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  column.index = columnIndex;
  row.index = rowIndex;
};
const cellClick = (row, column, cell, event) => {
  state.rowIndex = row.index;
  state.columnIndex = column.index;
};
const handleSelectionChange = (val) => {
  let arr = [];
  for (let item of val) {
    let ret = toRaw(item);
    if (ret !== undefined) {
      arr.push(ret);
    }
  }
  state.tableSelect = arr;
};
const batchDelete = () => {
  // 批量删除
  let deleteSelectArray = [];
  if (state.tableSelect.length > 0) {
    deleteSelectArray = state.tableSelect.map((item) => {
      return item.id;
    });

    ElMessageBox.confirm("确定删除所选特殊要求信息吗", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        for (let i = 0; i < deleteSelectArray.length; i++) {
          state.tableData = state.tableData.filter(
            (item) => item.id != deleteSelectArray[i]
          );
        }
      })
      .catch(() => {
        ElMessage.info("取消删除");
      });
  } else {
    ElMessage.warning("请先选择");
  }
};
const save = async () => {
  state.tableData.push({
    id: state.tableData.length + 1,
    createBy: state.formData.createBy,
    createTime: state.formData.createTime,
    updateBy: "",
    updateTime: "",
    isDeleted: true,
    contactComId: route.query.id,
    relationType: "",
    requestType: state.formData.requestType,
    requestContent: state.formData.requestContent,
    closeBy: state.formData.closeBy,
    closeDate: state.formData.closeDate,
  });
  state.dialogData.show = false;
};
const closeDiag = () => {
  state.formData.createBy = "";
  state.formData.createTime = "";
  state.formData.requestType = "";
  state.formData.requestContent = "";
  state.formData.closeBy = "";
  state.formData.closeDate = "";
};
const state = reactive({
  rowIndex: -1, //行索引
  columnIndex: -1, //列索引
  formData: {
    id: 0,
    createBy: "",
    createTime: "2024-5-20 14:00:00",
    updateBy: "",
    updateTime: "",
    isDeleted: true,
    contactComId: route.query.id,
    relationType: "",
    requestType: "",
    requestContent: "",
    closeBy: "",
    closeDate: "",
  },
  isUpdatess: false,
  loading: false,
  tableSelect: [],
  formRules: {
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
  },
  tableData: [],
  compareTableData: [],
  option: [
    {
      value: "王艳娇",
      label: "王艳娇",
    },
    {
      value: "大",
      label: "大",
    },
  ],
  dialogData: {
    title: "",
    show: false,
  },
});
watch(
  () => state.tableData,
  (newVal, oldVal) => {
    if (state.isUpdatess) {
      emit("specialNeedsInfo", newVal);
      emit("acceptData", newVal);
    }
    state.isUpdatess = true;
  },
  { deep: true }
);

defineExpose({
  resetTableData,//把子组件的方法暴露一个出口
  getList
})

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.middle-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title {
    border-left: 2px solid #5d9df5;
    padding-left: 4px;
    font-size: 16px;
    font-weight: 600;
  }
}
.btn_asset {
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}
::v-deep .el-dialog {
  padding: 0 !important;
}
::v-deep .el-dialog__title {
  margin: 8px 0px 0px 16px;
  font-weight: 600;
}
::v-deep .el-dialog__header {
  display: flex;
  align-items: center;
  height: 36px;
  border-bottom: 1px solid #dee1e6;
}
::v-deep .el-dialog__footer {
  height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #dee1e6;
}
::v-deep .dialog-footer {
  height: 24px;
}
::v-deep .el-dialog__body {
  padding-bottom: 0;
}
</style>
